<template>
    <div class="table">
        <el-container>
            <el-header>
                <div class="logo">
                    <a href="https://angelxyj.gitee.io/xuxiaomo.blog/">
                        <img src="../assets/blog.jpg" alt="">
                    </a>
                </div>
                <div class="advert">
                    <a href="https://angelxyj.gitee.io/xuxiaomo.docs">
                        <img src="../assets/adv.png" alt="">
                    </a>
                </div>
                <div class="user">
                    用户名：<b class="username">{{ getCookie('adminName') }}</b>
                    <el-button type="danger" round @click="logout">注销登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu default-active="0" class="el-menu-vertical-demo" background-color="#545c64"
                                text-color="#fff" active-text-color="#ffd04b" :router="true">
                                <el-sub-menu v-for="(auth, index) in auths" :key="auth._id" :index="'' + index">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>{{ auth.name }}</span>
                                    </template>
                                    <el-menu-item v-for="son in auth.children" :key="son._id" v-show="son.isShow"
                                        :index="son.path"><i :class="son.icon"></i>{{ son.name }}</el-menu-item>
                                </el-sub-menu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-main>
                        <p>你好，<span class="username">{{ getCookie('adminName') }}</span>，欢迎使用！</p>
                        <div v-show="$route.path === '/home'">
                            <h1 style="text-align: center;">数据统计</h1>
                            <br>
                            <el-table :data="Data" height="250" border style="width: 100%">
                                <el-table-column prop="date" label="日期" width="180">
                                </el-table-column>
                                <el-table-column prop="name" label="姓名" width="180">
                                </el-table-column>
                                <el-table-column prop="address" label="地址">
                                </el-table-column>
                            </el-table>
                        </div>
                        <router-view></router-view>
                    </el-main>
                    <el-footer>
                        <p>©2017 - 2023 By 许小墨 | Hi, welcome to my blog!</p>
                        <p><a href="https://angelxyj.gitee.io/xuxiaomo.blog/">许小墨のBlog</a> | <a
                                href="https://angelxyj.gitee.io/xuxiaomo.docs/">许小墨の笔记</a> | <a
                                href="https://blog.csdn.net/qq_60306931?type=blog">许小墨的CSDN</a></p>
                        <p>备案号：xxxxxx</p>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { getCookie, removeCookie } from '@/utils/cookie';
import { dataCount } from '@/request'
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
let auths = reactive(sessionStorage.getItem('auths') ? JSON.parse(sessionStorage.getItem('auths')) : [])
let Data = reactive([{
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-08',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-06',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-07',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}])


let logout = () => {
    ElMessageBox.confirm('你确定要注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        removeCookie('adminName')
        removeCookie('adminId')
        localStorage.removeItem('adminToken')
        sessionStorage.removeItem('auths')
        ElMessage({
            type: 'success',
            message: '注销成功!',
            onClose: () => {
                router.push('/login')
            }
        });
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消'
        });
    });
}
let handleOpen = (key, keyPath) => {
    console.log(key, keyPath);
}
let handleClose = (key, keyPath) => {
    console.log(key, keyPath);
}
let getDataCount = () => {
    dataCount().then((data) => {
        console.log(data);
    })
}

getDataCount()

    // let data = await authList()
    // console.log(this.auths);
    // this.auths = data.data.authlist


</script>

<style lang="scss" scoped>
.table,
.el-container {
    height: 100%
}

.el-header {
    height: 100px !important;
    background-color: cadetblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
}

.el-aside {
    background-color: rgb(84, 92, 100);
}

.el-main {
    background-color: #ccc;
}

.el-footer {
    background-color: deepskyblue;
    height: 60px !important;
    text-align: center;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    a {
        color: black;
        text-decoration: none;
    }
}

.logo img,
.advert img {
    height: 100px;
}

.el-button {
    margin: 20px
}

// .el-row{
//     width: 100%;
// }
.el-col {
    width: 200px;

    .el-menu {
        border: none !important;

        .el-sub-menu {
            width: 200px;

        }
    }
}

.username {
    color: red
}
</style>
